<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--内部CSS注释不可以放在style内-->
    <style type="text/css">
        body {background-color:rgb(168, 164, 164);}
        p {color:blue;}
        </style>
</head>
<body>
    
    <h1>foo</h1>
    <a id="tips">有用的提示部分</a>
	<p>hr 标签定义水平线：</p>
	<hr>
	<p>这是段落。</p>
	<hr>
	<p>这是段落。</p>
	<hr>
    <p>这是段落。</p>
    
    <b>这个文本是加粗的</b><br>
    <p></p>
 <strong>这个文本是加粗的</strong><br>
 <big>这个文本字体放大</big><br>
 <em>这个文本是斜体的</em><br>
 <i>这个文本是斜体的</i><br>
 <small>这个文本是缩小的</small><br>
这个文本<sub>下标</sub><br>
这个文本<sup>上标</sup><br>
     <ins>下划线</ins>	
    <del>删除线</del>
    <pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
    </pre>
</p>
<p><a href="https://www.runoob.com/" target="_self" rel="noopener noreferrer">_self</a><br><!--当前页打开-->
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">_blank</a><br><!--空白页打开-->
<a href="https://www.runoob.com/" target="_parent" rel="noopener noreferrer">_parent</a><br><!--转上一级页面-->
<a href="https://www.runoob.com/" target="_top" rel="noopener noreferrer">_top</a></p><!--转最高级页面-->


<p>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a></p><!--跳转到标题后的一句-->

<p>创建图片链接:
    <a href="//www.runoob.com/html/html-tutorial.html">
    <img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
    <p>无边框的图片链接:
    <a href="//www.runoob.com/html/html-tutorial.html">
    <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
  
        <base href="http://www.runoob.com/images/" target="_blank">
    <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
    <br><br>
    <a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
    
    <p style="background-color:green;">这是一个段落。</p>


    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>


    <form name="input" action="html_form_action.php" method="get">
        Username: <input type="text" name="user">
        <input type="submit" value="Submit">
    </form>


    <form action="">
        <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
        </select>
        </form>

        <p><script>document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");

        </script></p>
    <button type="button" onclick="alert('欢迎!')">点我!</button>
    <p id="demo"></p>

</body>
</html> 